<template>
	<div class="container-fluid wraper">
		<h1 class="title">
			Vue3 组件间通信
		</h1>
		<hr>
		<div class="row">
			<div class="col-xs-3 col-md-3 col-lg-3 col-xl-3">
				<!-- 导航区 -->
				 <!-- props可以实现 父子之间消息的互传 ，父->子传递的是属性，子->父依靠父传递的方法(调用方法返回数据)，不建议多层传递 -->
				<router-link active-class="active" class="list-group-item" to="/props">1. props</router-link>
				<!-- 自定义event可以实现 子->父 消息的传递，父(@send-toy='')，子(emit('send-toy', ...)) -->
				<router-link active-class="active" class="list-group-item" to="/event">2. 自定义事件</router-link>
				<!-- mitt可以实现任意组件之间的通信，相当于一个总线，收数据方定义事件，发数据方触发事件 -->
				<router-link active-class="active" class="list-group-item" to="/mitt">3. mitt</router-link>
				<!-- v-model可以实现父子之间的通信，双向绑定 -->
				<router-link active-class="active" class="list-group-item" to="/model">4. v-model</router-link>
				<!-- $attrs可以实现夸层级(如爷孙)之间的通信 -->
				<router-link active-class="active" class="list-group-item" to="/attrs">5. $attrs</router-link>
				<!-- $ref-$parent可以实现父子之间的通信 -->
				<router-link active-class="active" class="list-group-item" to="/ref-parent">6. <span class="small">$refs、$parent</span></router-link>
				<!-- provide-inject可以实现父组件与后辈节点的通信 -->
				<router-link active-class="active" class="list-group-item" to="/provide-inject">7. provide、inject</router-link>
				<!-- pinia是一个中间件，可以借用这个中间件实现任意组件之间的通信 -->
				<router-link active-class="active" class="list-group-item" to="/pinia">8. pinia</router-link>
				<!-- slot是一个代码复用的机制(类似于aoe)，其可以实现父的内容在子展示，也可以实现子的数据传递给父进行展示(虽然展示还是在子) -->
				<router-link active-class="active" class="list-group-item" to="/slot">9. slot</router-link>
			</div>
			<div class="col-xs-9 col-md-9 col-lg-9 col-xl-9">
				<div class="panel-body">
					<!-- 占位一个展示区 -->
					<router-view></router-view>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="App">
</script>

<style>
	.wraper .title {
		padding: 20px;
		text-align: center;
		min-width: 610px;
	}
	.wraper .small{
		font-size: 15px;
	}
	.wraper .list-group-item {
		min-width: 230px;
	}
</style>